<template>
  <basic-container>
    <el-row>
      <el-col :span="5" style="padding: 10px 0 10px 10px">
        <el-tabs type="border-card" class="bom-tab">
          <el-tab-pane label="BOM列表">
            <div class="icon-inspection-item">
              <el-button class="refresh-btn inspection-btn" size="small" icon="el-icon-refresh" @click="refreshBomTree"></el-button>
              <el-button v-if="permission.bom_add" class="add-btn inspection-btn" size="small" icon="el-icon-plus" @click="addBomTree"></el-button>
              <el-button
                v-if="permission.bom_edit"
                :disabled="!selectTreeNode"
                class="inspection-btn"
                :class="selectTreeNode ? 'edit-btn' : 'btn-disabled'"
                size="small"
                icon="el-icon-edit"
                @click="editBomTree"
              ></el-button>
              <el-button
                class="inspection-btn"
                :disabled="!selectTreeNode"
                :class="selectTreeNode ? 'del-btn' : 'btn-disabled'"
                v-if="permission.bom_delete"
                size="small"
                icon="el-icon-close"
                @click="delBomTree"
              ></el-button>
            </div>
            <div class="search-tree">
              <el-input placeholder="请输入BOM编码" v-model="searchPartNo" size="small" clearable></el-input>
              <!-- <el-button type="primary" size="small" @click="handleSearchBomTree">查询</el-button> -->
            </div>
            <div class="tree-container" v-loading="bom.loading">
              <vue-easy-tree
                ref="veTree"
                class="custom-tree"
                node-key="id"
                :item-size="26"
                :filter-node-method="filterNode"
                height="calc(100vh - 290px)"
                :data="treeData"
                :props="defaultProps"
                @node-click="nodeClick"
              ></vue-easy-tree>
              <!-- <el-tree :data="treeData" :props="defaultProps" node-key="id" @node-click="handleNodeClick" class="custom-tree"></el-tree> -->
            </div>
            <el-dialog append-to-body :close-on-click-modal="false" :title="bom.title" :visible.sync="bom.visible" width="30%">
              <avue-form ref="bomTreeForm" v-model="bom.form" :option="bom.option" @submit="submitBomTree"> </avue-form>
              <div slot="footer" class="avue-dialog__footer">
                <el-button size="small" icon="el-icon-circle-close" @click="bom.visible = false">取消</el-button>
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="$refs.bomTreeForm.submit()" v-preventReClick>提交</el-button>
              </div>
            </el-dialog>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="19">
        <avue-crud
          :option="bomDetail.option"
          :table-loading="bomDetail.loading"
          v-model="bomDetail.form"
          :data="bomDetail.data"
          :page.sync="bomDetail.page"
          :permission="permissionList"
          ref="crud"
          @row-save="bomDetailRowSave"
          @row-update="bomDetailRowUpdate"
          @row-del="bomDetailRowDel"
          @search-change="searchChange"
          @search-reset="searchReset"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
        >
          <!--          <template slot="menuRight">-->
          <!--            <user-table-config :option="bomDetail.option" @confirm="(val) => handleSetUserConfig(val, pageCode)"></user-table-config>-->
          <!--          </template>-->
          <template slot="menuLeft" slot-scope="{ row }">
            <el-button class="detailBtn" :disabled="!selectTreeNode" @click="$refs.crud.rowAdd()" type="primary" size="small" icon="el-icon-plus">新 增</el-button>
          </template>
          <template slot="menu" slot-scope="{ row }">
            <el-button @click="handleReplace(row)" type="text" size="small" icon="el-icon-sort">替代料</el-button>
          </template>
        </avue-crud>
        <el-dialog append-to-body title="替代料" :visible.sync="replace.visible" width="60%">
          <avue-crud :option="replace.option" :table-loading="replace.loading" v-model="replace.form" :data="replace.data" ref="replaceCrud" @row-del="replaceRowDel">
            <template slot="menuLeft">
              <el-button @click="addReplace" type="primary" size="small" icon="el-icon-plus">新增替代料</el-button>
            </template>
            <template slot="replacePartNo" slot-scope="{ row, index }">
              <el-input placeholder="请选择替代料" disabled size="mini" v-model="row.replacePartNo" class="bom-partNo">
                <el-button size="mini" slot="append" icon="el-icon-search" @click="handleOpenPartNo(row, index)"></el-button>
              </el-input>
            </template>
            <template slot="replaceQuantity" slot-scope="{ row, index }">
              <el-input-number size="mini" v-model="row.replaceQuantity" controls-position="right" :min="0" class="bom-replaceQuantity"></el-input-number>
            </template>
          </avue-crud>
          <div slot="footer" class="avue-dialog__footer">
            <el-button size="small" icon="el-icon-circle-close" @click="replace.visible = false">取消</el-button>
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="submitReplace" v-preventReClick>保存</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <global-modal-template :visibile.sync="visibile" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </global-modal-template>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"></common-modal-template>
  </basic-container>
</template>

<script>
import { getAllList, add, remove, addBomDetail, removeBomDetail, getDetail, getReplacePartlList, addReplacePart } from '@/api/admin/bom';
import { mapGetters } from 'vuex';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import GlobalModalTemplate from '@/components/common-modal-template/global-modal-template.vue';
import userTableConfig from '@/components/user-table-config';
import userConfig from '@/mixins/userConfig';
import VueEasyTree from '@wchbrad/vue-easy-tree';
import '@wchbrad/vue-easy-tree/src/assets/index.scss';
export default {
  components: {
    CommonModalTemplate,
    userTableConfig,
    VueEasyTree,
    GlobalModalTemplate
  },
  mixins: [userConfig()],
  data() {
    return {
      pageCode: 'BOM',
      visibile: false,
      modalName: '', //打开公用模态框名称
      searchPartNo: '',
      form: {},
      timer: null,
      tableOption: {},
      bom: {
        visible: false,
        loading: false,
        title: '新增',
        form: {},
        page: {
          total: 0,
          current: 1,
          size: 20
        },
        query: {},
        option: {
          emptyBtn: false,
          submitBtn: false,
          labelWidth: 100,
          column: [
            {
              label: 'BOM编码',
              prop: 'bomNo',
              span: 12,
              rules: [
                {
                  required: true,
                  message: '请输入BOM编码',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: 'BOM版本',
              prop: 'bomVersion',
              span: 12,
              rules: [
                {
                  required: true,
                  message: '请输入BOM版本',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '产品编码',
              prop: 'productPartNo',
              type: 'search',
              disabled: true,
              span: 12,
              appendClick: () => {
                this.openUserCommonModal({
                  type: 'bomTreePartNo'
                });
              },
              rules: [
                {
                  required: true,
                  message: '请输入产品编码',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '产品名称',
              prop: 'productPartName',
              disabled: true,
              span: 12
            },
            {
              label: '产品型号',
              prop: 'productPartModel',
              disabled: true,
              span: 12
            },
            {
              label: '产品类型',
              prop: 'productType',
              type: 'select',
              disabled: true,
              dicUrl: '/api/blade-system/dict/dictionary?code=part_type',
              props: {
                label: 'dictValue',
                value: 'dictKey'
              },
              span: 12
            },
            {
              label: '生产类型',
              prop: 'manufactureType',
              type: 'select',
              value: 'SELF',
              span: 12,
              dicData: [
                {
                  label: '自制',
                  value: 'SELF'
                },
                {
                  label: '外协',
                  value: 'OUTSOURCING'
                },
                {
                  label: '采购',
                  value: 'PURCHASE'
                }
              ],
              rules: [
                {
                  required: true,
                  message: '请选择生产类型',
                  trigger: 'change'
                }
              ]
            },
            {
              label: '源创建时间',
              prop: 'sourceCreateDate',
              span: 12,
              type: 'datetime',
              format: 'yyyy-MM-dd HH:mm:ss',
              valueFormat: 'yyyy-MM-dd HH:mm:ss'
            },
            {
              label: '同步时间',
              prop: 'createTime',
              disabled: true,
              span: 12
            }
          ]
        }
      },
      selectTreeNode: null,
      defaultProps: {
        children: 'children',
        label: 'bomNo'
      },
      bomDetail: {
        data: [],
        query: {},
        form: {},
        page: {
          total: 0,
          current: 1,
          size: 15
        },
        loading: false,
        option: {
          height: 'calc(100vh - 382px)',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          indexLabel: '序号',
          addBtn: false,
          delBtn: true,
          viewBtn: true,
          editBtn: true,
          searchBtn: true,
          refreshBtn: false,
          selection: false,
          dialogClickModal: false,
          labelWidth: 120,
          searchLabelWidth: 90,
          menuWidth: 300,
          columnBtn: false,
          column: [
            {
              label: '生产类型',
              prop: 'manufactureType',
              type: 'select',
              value: 'SELF',
              popperClass: 'manufactureType-select',
              dicData: [
                {
                  label: '自制',
                  value: 'SELF'
                },
                {
                  label: '外协',
                  value: 'OUTSOURCING'
                },
                {
                  label: '采购',
                  value: 'PURCHASE'
                }
              ],
              rules: [
                {
                  required: true,
                  message: '请选择生产类型',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '物料编码',
              prop: 'partNo',
              search: true,
              searchSpan: 6,
              disabled: true,
              type: 'search',
              searchType: 'input',
              rules: [
                {
                  required: true,
                  message: '请选择物料编码',
                  trigger: 'blur'
                }
              ],
              appendClick: () => {
                this.openUserCommonModal({
                  type: 'bomDetailPartNo'
                });
              }
            },
            {
              label: '物料名称',
              prop: 'partName',
              disabled: true
            },
            {
              label: '物料规格',
              prop: 'partSpec',
              search: true,
              searchSpan: 6,
              disabled: true
            },
            {
              label: '位号',
              prop: 'positionNo'
            },
            {
              label: '用量',
              prop: 'unitQuantity',
              type: 'number',
              controls: false,
              precision: 10,
              rules: [
                {
                  required: true,
                  message: '请输入用量',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '单位',
              prop: 'uom'
            },
            {
              label: '关键料',
              prop: 'isKeyPart',
              type: 'switch',
              value: false,
              dicData: [
                {
                  label: '否',
                  value: false
                },
                {
                  label: '是',
                  value: true
                }
              ]
            }
          ]
        }
      },
      bomDetailId: null,
      treeData: [],
      replace: {
        visible: false,
        loading: false,
        form: {},
        data: [],
        rowIndex: null,
        option: {
          height: 'calc(100vh - 382px)',
          calcHeight: 30,
          tip: false,
          border: true,
          index: true,
          indexLabel: '序号',
          addBtn: false,
          delBtn: true,
          viewBtn: false,
          editBtn: false,
          searchBtn: false,
          refreshBtn: false,
          selection: false,
          dialogClickModal: false,
          labelWidth: 120,
          menuWidth: 100,
          columnBtn: false,
          column: [
            {
              label: '替代物料编码',
              prop: 'replacePartNo'
            },
            {
              label: '替代物料名称',
              prop: 'replacePartName'
            },
            {
              label: '替代物料规格',
              prop: 'replacePartSpec'
            },
            {
              label: '替代数量',
              prop: 'replaceQuantity'
            }
          ]
        }
      }
    };
  },
  watch: {
    searchPartNo(val) {
      this.$refs.veTree.filter(val);
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.bom_add, false),
        viewBtn: this.vaildData(this.permission.bom_view, false),
        delBtn: this.vaildData(this.permission.bom_delete, false),
        editBtn: this.vaildData(this.permission.bom_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(',');
    }
  },
  async mounted() {
    this.$nextTick(() => {
      //搜索与表格结构分隔
      this.$structuralSplit();
    });
    this.treeData = await this.initBomTree();
  },
  methods: {
    formatterToTree(flatList) {
      const map = {};
      const roots = [];

      flatList.forEach((node) => {
        map[node.id] = { ...node, children: [] };
      });

      flatList.forEach((node) => {
        // 将 parentId 为 0 或 null 的节点视为根节点
        if (node.parentId === 0 || node.parentId === null) {
          roots.push(map[node.id]);
        } else {
          if (map[node.parentId]) {
            map[node.parentId].children.push(map[node.id]);
          }
        }
      });
      return roots;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.bomNo.indexOf(value) !== -1;
    },
    async handleSearchBomTree() {
      Object.assign(this.bom.query, { bomNo: this.searchPartNo });
      this.refreshBomTree();
    },
    async initBomTree() {
      try {
        this.bom.loading = true;
        const response = await getAllList(this.bom.query);
        const data = response.data.data;
        return this.formatterToTree(data);
      } catch (error) {
        return [];
      } finally {
        this.bom.loading = false;
      }
    },
    addBomTree() {
      this.bom.title = '新增';
      this.bom.visible = true;
      this.$refs.bomTreeForm && this.$refs.bomTreeForm.resetFields();
      this.bom.form.manufactureType = 'SELF';
    },
    editBomTree() {
      if (this.selectTreeNode && this.selectTreeNode.id) {
        this.bom.title = '编辑';
        this.bom.visible = true;
        console.log(this.selectTreeNode);
        this.bom.form = structuredClone(this.selectTreeNode);
      }
    },
    delBomTree() {
      if (this.selectTreeNode.id) {
        this.$confirm(`确定将数据删除?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          remove(this.selectTreeNode.id).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.refreshBomTree();
            this.selectTreeNode = null;
          });
        });
      }
    },
    async refreshBomTree() {
      this.bomDetail.loading = true;
      this.treeData = await this.initBomTree();
      this.selectTreeNode = null;
      this.bomDetail.data = [];
      this.bomDetail.page.current = 1;
      this.bomDetail.page.total = 0;
      this.bomDetail.loading = false;
    },
    async submitBomTree(form, done) {
      if (this.bom.title === '新增') {
        delete form.id;
        form.sourceType = 'MES';
        form.parentId = this.selectTreeNode ? this.selectTreeNode.id : 0;
      }
      add(form)
        .then(() => {
          this.$message.success('操作成功');
          this.bom.visible = false;
          this.refreshBomTree();
          this.selectTreeNode = null;
          done();
        })
        .catch(() => {
          done();
        });
    },
    nodeClick(data) {
      this.selectTreeNode = structuredClone(data);
      this.bomDetail.query = {};
      this.bomDetail.page.current = 1;
      this.getBomPageDetail();
    },
    searchChange(params, done) {
      this.bomDetail.query = params;
      this.bomDetail.page.current = 1;
      this.getBomPageDetail();
      done();
    },
    searchReset() {
      this.bomDetail.query = {};
      this.bomDetail.page.current = 1;
      this.getBomPageDetail();
    },
    getBomPageDetail() {
      this.bomDetail.loading = true;
      getDetail(this.bomDetail.page.current, this.bomDetail.page.size, Object.assign({ bomId: this.selectTreeNode ? this.selectTreeNode.id : '' }, this.bomDetail.query))
        .then((res) => {
          let data = res.data.data;
          this.bomDetail.data = data.records;
          this.bomDetail.page.total = data.total;
        })
        .finally(() => {
          this.bomDetail.loading = false;
        });
    },
    currentChange(currentPage) {
      this.bomDetail.page.current = currentPage;
      this.getBomPageDetail();
    },
    sizeChange(pageSize) {
      this.bomDetail.page.size = pageSize;
      this.getBomPageDetail();
    },
    bomDetailRowSave(form, done, loading) {
      form.bomId = this.selectTreeNode.id;
      addBomDetail(form).then(
        () => {
          this.bomDetail.page.current = 1;
          this.getBomPageDetail();
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          done();
        },
        (error) => {
          loading();
        }
      );
    },
    bomDetailRowUpdate(form, index, done, loading) {
      addBomDetail(form).then(
        () => {
          this.getBomPageDetail();
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          done();
        },
        (error) => {
          loading();
        }
      );
    },
    bomDetailRowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return removeBomDetail(row.id);
        })
        .then(() => {
          this.bomDetail.page.current = 1;
          this.getBomPageDetail();
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
    },
    handleReplace(row) {
      this.replace.visible = true;
      this.replace.loading = true;
      this.bomDetailId = row.id;
      getReplacePartlList(row.id)
        .then((res) => {
          let data = res.data.data;
          this.replace.data = data;
        })
        .catch((err) => {})
        .finally(() => {
          this.replace.loading = false;
        });
    },
    addReplace() {
      this.replace.data.push({
        replacePartNo: '',
        replacePartName: '',
        replacePartSpec: '',
        replaceQuantity: undefined
      });
    },
    replaceRowDel(row) {
      let index = row.$index;
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return this.replace.data.splice(index, 1);
        })
        .then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
    },
    submitReplace() {
      let flag = this.replace.data.some((item) => {
        return item.replaceQuantity === undefined || item.replacePartNo === '';
      });
      if (flag) {
        this.$message.warning('替代料数据中存在替代数量没值或替代物料编码为空的数据，请仔细检查！');
        return;
      }
      let data = this.replace.data.map((item) => {
        return {
          ...item,
          bomDetailId: this.bomDetailId
        };
      });
      this.replace.loading = true;
      addReplacePart({
        bomDetailId: this.bomDetailId,
        bomDetailReplacementDTOList: data
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.replace.visible = false;
        })
        .finally(() => {
          this.replace.loading = false;
        });
    },
    handleOpenPartNo(row, index) {
      this.replace.rowIndex = index;
      this.openUserCommonModal({
        type: 'replacePartNo'
      });
    },
    openUserCommonModal({ type }) {
      this.tableOption = {
        modalTitle: '选择物料信息（双击进行选择）',
        url: '/api/mes-admin/part-master/page',
        isPage: true,
        rowSelectionType: 'single',
        query: {
          // semifinished: true
        },
        menu: false,
        editBtn: false,
        menuWidth: 100,
        templateName: 'BOMPARTMASTER'
      };
      switch (type) {
        case 'replacePartNo':
          this.modalName = 'replacePartNoModal';
          this.visibile = true;
          break;
        case 'bomDetailPartNo':
          //  partType: 'PRODUCT'成品 / 原材料'MATERIAL' 半成品:SEMIFINISHED
          //  semifinished:false 原材料 true 在制品（半成品，成品）
          this.tableOption.query.partTypeStr = 'SEMIFINISHED,MATERIAL';
          this.modalName = 'bomDetailPartNoModal';
          this.visibile = true;
          break;
        case 'bomTreePartNo':
          this.tableOption.query.semifinished = true;
          this.modalName = 'bomTreePartNoModal';
          this.visibile = true;
          break;
        default:
          break;
      }
    },
    getSelectedRows(rowData) {
      switch (this.modalName) {
        case 'bomTreePartNoModal':
          this.$set(this.bom.form, 'productPartNo', rowData.partNo);
          this.$set(this.bom.form, 'productPartName', rowData.name);
          this.$set(this.bom.form, 'productPartModel', rowData.partModel);
          this.$set(this.bom.form, 'productPartId', rowData.id);
          this.$set(this.bom.form, 'productType', rowData.partType);
          break;
        case 'bomDetailPartNoModal':
          this.$set(this.bomDetail.form, 'partNo', rowData.partNo);
          this.$set(this.bomDetail.form, 'partName', rowData.name);
          this.$set(this.bomDetail.form, 'partSpec', rowData.partSpec);
          this.$set(this.bomDetail.form, 'partMasterId', rowData.id);
          break;
        case 'replacePartNoModal':
          this.$set(this.replace.data[this.replace.rowIndex], 'replacePartNo', rowData.partNo);
          this.$set(this.replace.data[this.replace.rowIndex], 'replacePartName', rowData.name);
          this.$set(this.replace.data[this.replace.rowIndex], 'replacePartSpec', rowData.partSpec);
          this.$set(this.replace.data[this.replace.rowIndex], 'replacePartId', rowData.id);
          this.$set(this.replace.data[this.replace.rowIndex], 'replaceQuantity', undefined);
          break;
        default:
          break;
      }
    },
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .bom-tab {
  .el-tabs__content {
    padding: 5px;
    .icon-inspection-item {
      padding: 5px 0;
      .inspection-btn {
        border-radius: 4px;
        width: 27px;
        height: 27px;
        min-width: 27px;
        margin-left: 2px !important;
        background-color: #fff;
        padding: 0;
        overflow: hidden;
        position: relative;
        line-height: normal;
        border: 1px solid #dcdfe6;
        margin-right: 5px;
        box-shadow: 2px 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
      }
      .refresh-btn {
        color: #00bcd4;
      }
      .add-btn {
        color: #4caf50;
      }
      .edit-btn {
        color: #077fc1;
      }
      .btn-disabled {
        color: #dedede;
      }
      .del-btn {
        color: #f44336 !important;
      }
    }
    .search-tree {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 5px;
      button {
        margin-left: 5px;
      }
    }
  }
}
.bom-partNo .el-input-group__append {
  button {
    padding: 0 13px;
  }
}
</style>
<style scoped lang="scss">
.tree-container {
  height: calc(100vh - 290px);
  // ::v-deep .custom-tree {
  //   color: #595959;
  //   background: transparent;

  //   /* 树形结构节点添加连线 */
  //   .el-tree-node {
  //     position: relative;
  //     padding-left: 10px;

  //     .el-tree-node__content {
  //       height: 20px;
  //       padding-left: 0 !important;
  //       .el-tree-node__expand-icon {
  //         background: url(../../assets/img/order-route/tree1.png) no-repeat;
  //         display: inline-block;
  //         width: 16px;
  //         height: 16px;
  //         padding: 0;

  //         &.expanded {
  //           transform: none;
  //           background: url(../../assets/img/order-route/tree2.png) no-repeat;
  //         }

  //         &::before {
  //           content: '';
  //         }

  //         &.is-leaf {
  //           display: none;
  //         }
  //       }

  //       .el-tree-node__label {
  //         margin-left: 10px;
  //       }
  //     }

  //     &:last-child:before {
  //       height: 50px;
  //     }
  //     &:before {
  //       content: '';
  //       left: -4px;
  //       position: absolute;
  //       right: auto;
  //       border-width: 1px;
  //       border-left: 1px solid #bbbbbb;
  //       bottom: 0px;
  //       height: 100%;
  //       top: -40px;
  //       width: 1px;
  //     }

  //     &:after {
  //       content: '';
  //       left: -4px;
  //       position: absolute;
  //       right: auto;
  //       border-width: 1px;
  //       border-top: 1px solid #bbbbbb;
  //       height: 20px;
  //       top: 10px;
  //       width: 15px;
  //     }
  //   }

  //   & > .el-tree-node {
  //     & > .el-tree-node__content {
  //       .el-tree-node__expand-icon {
  //         // background-image: url(../../assets/img/order-route/check.png) !important;
  //       }
  //     }

  //     &::after {
  //       border: 0px solid;
  //     }
  //   }

  //   .el-tree-node__children {
  //     padding-left: 12px;
  //   }
  // }
}
</style>
